<!-- 新增/编辑指标 -->
<template>
  <a-drawer
    width="45%"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> {{ props.data?.id ? '编辑指标' : '新增指标' }} </template>
    <div>
      <a-form :model="formData" ref="refForm" :rules="rules" auto-label-width>
        <!-- <a-form-item
          label="维度名称"
          tooltip="注：可以根据不同的考核维度选择考核工具，在当前考核，每一个考核工具，只可以选择一次，一经使用，新增维度的时候则该考核工具为不可用"
          field="name"
          show-colon
        >
          <a-input v-model="formData.name"></a-input>
        </a-form-item> -->
        <a-form-item
          label="考核工具"
          field="type"
          show-colon
          tooltip="注:可以根据不同的考核维度选择考核工具，在当前考核，每一个考核工具，只可选取一次，一经被使用，新增维度的时候则该考核工具为不可选维度名取状态。关键业绩考核(KPI)与目标与关键成果法(OKR)存在互斥关系，在同一个考核中，只能选择一个。"
        >
          <a-checkbox-group v-model="checkValues" direction="vertical">
            <a-checkbox
              v-for="(item, index) in indexOptions"
              :key="item.value"
              :value="item.value"
            >
              {{ item.lable }}
              <a-tooltip
                v-if="index === 4"
                content="注:加减分项考核工具，作为特殊的考核工具，选择该工具时，只要被考核者触发了该考核工具的考核标准，就根据条件进行减分，该分项不受总分上限限制"
              >
                <icon-info-circle-fill
              /></a-tooltip>
              <a-tooltip
                v-if="index === 5"
                content="注:否决指标法考核工具，作为特殊的考核工具，选择该工具时，设置的指标就会直接关系到，该考核是否会直接被拒绝通过，或直接通过"
              >
                <icon-info-circle-fill
              /></a-tooltip>
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <!-- <a-form-item
          v-if="formData.type && [1, 2, 3, 4].includes(formData.type)"
          label="维度权重"
          field="weight"
          tooltip="注：在设置了总分计算方式为加权计算，且选取的考核工具为：关键业绩考核（KPI）、能力素质考核（BPI）、工作计划考核（PPI）、目标与关键成功法（OKR）的情况下，需要设置维度权重，且权重总和为100%，加减分项、否决指标法无法设置维度权重"
          show-colon
        >
          <a-input-number v-model="formData.weight" allow-clear hide-button>
            <template #suffix> % </template>
          </a-input-number>
        </a-form-item> -->

        <!-- <a-form-item label="备注" field="note" show-colon>
          <a-textarea
            v-model="formData.note"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item
          label="允许员工新增指标"
          field="isAllow"
          show-colon
          tooltip="注：开启后，员工在指定指标时可以为当前考核维度新增指标"
        >
          <a-switch
            v-model="formData.isAllow"
            :checked-value="1"
            :unchecked-value="2"
            size="medium"
          >
            <template #checked> 允许 </template>
            <template #unchecked> 禁止 </template>
          </a-switch>
        </a-form-item> -->
      </a-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { PerformanceAssessmentTemplateDimensionality } from '@/apis/management/performance/baseSetting/template/type';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data?: PerformanceAssessmentTemplateDimensionality; // 传进来的数据,
    selectedIndex?: number[]; // 已选择的指标,
  }>(),
  {
    selectedIndex: () => []
  }
);

const emits = defineEmits(['update:visible', 'submit']);
let refForm = ref();

let isShowContinueBtn = ref(true); // 是否显示继续新增按钮
const formData = ref<PerformanceAssessmentTemplateDimensionality>({});
/**
 * 查重
 */
const validateName = async (value: any, cb: any) => {
  //   if (value === props.data?.name) return;
  //   const res = await GetPpiIndexRepeat({
  //     name: value
  //   });
  //   if (res?.code === 400) {
  //     cb('名称已存在!');
  //   }
};
const rules = reactive({
  type: [
    {
      // required: true,
      // message: '请选择'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      //   validator: validateName
    }
  ],
  weight: [
    {
      required: true,
      message: '请输入'
    }
  ]
});
const checkValues = ref([]);
watch(
  () => props.visible,
  (newVal: boolean) => {
    // 如果是编辑，则赋值给formData
    formData.value = cloneDeep(props.data);
    checkValues.value = cloneDeep(props.selectedIndex);
  }
);

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('submit', checkValues.value);
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
const indexOptions = Object.freeze([
  { value: 1, lable: '关键业绩考核（KPI）' },
  { value: 2, lable: '能力素质考核（BPI）' },
  { value: 3, lable: '工作计划考核（PPI）' },
  { value: 4, lable: '目标与关键成果法（OKR）' },
  { value: 5, lable: '加减分项' },
  { value: 6, lable: '否决指标法（0-1）' }
]);
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
